<template>
  <view class="hot-comtainer">
    <navigator :url="`/pages/category/goodsDetail?id=${item.id_}`" class="spu_goods" v-for="item in  list "
      :key="item.id_">
      <image class="spu_goods_img" :src="item.main_img_ || positionImg" mode="aspectFill" />
      <view class="spu-goods-content">
        <view class="spu_goods_name ellipsis">{{ item.name_ }}</view>
        <view v-if="item.tag_names_">
          <text v-for="(it, idx) in  item.tag_names_.split(',') " class="tag"
            :style="{ '--color': `#${item.tag_colors_.split(',')[idx]}`, '--bgColor': colorRgb(`#${item.tag_colors_.split(',')[idx]}`, 30) }"
            :key="it">{{ it }}</text>
        </view>
        <view class="spu_goods_footer">
          <text class="spu_goods_price">￥{{ item.price_ }}</text>
          <view class="icon-cart-container" @tap.stop="checkSpec(item)">
            <text class="iconfont icon-cart"></text>
          </view>
        </view>
      </view>
    </navigator>
    <view class="loading-txt">
      {{ finished ? "没有更多数据了" : "正在加载..." }}
    </view>
  </view>
</template>

<script setup lang="ts">
import positionImg from "@/static/images/position.png"
import { colorRgb } from "@/utils/common-utils"

import type { goodsSpuData } from '@/types/home';

defineProps<{
  list: goodsSpuData[],
  finished: boolean
}>()

const emits = defineEmits(['showSkuPanel'])
const checkSpec = async (item: goodsSpuData) => {
  emits('showSkuPanel', item.id_)
}

</script>

<style lang="scss">
.hot-comtainer {
  margin-top: 16px;
  padding: 0 6px;

  .spu_goods {
    padding: 6px;
    display: flex;
    margin-bottom: 12px;
    background-color: #fff;

    .spu_goods_img {
      width: 100px;
      height: 100px;
    }

    .spu-goods-content {

      flex: 1;
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .tag {
        color: var(--color);
        font-size: 12px;
        padding: 2px 4px;
        border-radius: 4px;
        background-color: var(--bg-color);
      }

      .spu_goods_name {
        $padding: 4px;
        padding: 0 $padding ;
        width: calc(100% - 2 * $padding);
        font-size: 14px;
      }

      .spu_goods_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px;

        .spu_goods_price {
          color: red;
          font-size: 18px;
        }

        .icon-cart-container {
          $wh: 30px;
          width: $wh;
          height: $wh;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: $uni-color-warning;

          .icon-cart {
            color: #fff;
            // font-size: 20px;
            // font-weight: bold;
          }
        }
      }
    }
  }
}

.loading-txt {
  text-align: center;
  padding: 6px 0 24px;
}
</style>

